<template>
  <div>
    <mt-button type="default">default</mt-button>
    <mt-button type="primary" v-show="test">{{name1}}</mt-button>
    <mt-button @click='_handleEareCode'
               type="danger">{{name}}
    </mt-button>
    <mt-cell
      title="aaaaaaaaaaaaa"
      value="bbbbbbbbbbb"
      is-link
      @click='_handleEareCode'
    ></mt-cell>

    <el-upload
      action="http://dev.upload.famlink.co/upload/fileUpload/oss"
      list-type="picture-card"
      name="ico_upload"
      :before-upload="beforeAvatarUpload"
      :limit=1
      :data='upData'
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <!--<el-dialog :visible.sync="dialogVisible">-->
      <!--<img width="100%" :src="dialogImageUrl" alt="">-->
    <!--</el-dialog>-->
  </div>

</template>

<script>
  import api from '../plugins/api'
  import { Toast } from 'mint-ui'
  import md5 from 'js-md5'
  import { formatDate } from '../plugins/utils'
  import CalcuMD5 from '../plugins/md5'

  const Cookie = process.browser ? require('js-cookie') : undefined
  export default {
    layout: 'raindrop',
    asyncData(process) {
      return {
        name: process.static ? 'static' : process.server ? 'server' : 'client'
      }
    },
    data() {
      return {
        name1: 'message2',
        test: true,
        dialogImageUrl: '',
        dialogVisible: false,
        md5: null,
        upData: {
          cid: 'paramida-debug-system_djy',
          os: 'IOS-9.3.2',
          network: 1,
          appkey: 'com.raindrop.link',
          appv: '1.1.0-dev',
          sdkv: '1.1.0',
          country: '1.0.0',
          lang: 'zh-CN',
          time: (new Date()).valueOf(),
          local_time: formatDate(new Date().getTime()),
          req_id: Math.random() + (new Date()).valueOf(),
          resolution: '',
          manufacturer: '',
          channel: 'test',
          timezone: -8
        },
        sign:null
      }
    },
    created() {
      // console.log(this.name)
    },
    head: {
      title: 'message page'
    },
    methods: {
      handleRemove(file, fileList) {
        // console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },

      beforeAvatarUpload(file) {
        console.log(file)
        // const newParam = Object.assign(this.upData, {ico_upload:file})
        const sign = CalcuMD5('http://dev.upload.famlink.co/upload/fileUpload/oss', this.upData, 'post')
        this.upData.sign = sign
        console.log(this.upData)
        // const isJPG = file.type === 'image/jpeg'
        // const isLt2M = file.size / 1024 / 1024 < 2
        //
        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!')
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传头像图片大小不能超过 2MB!')
        // }
        // return isJPG && isLt2M
      },
      //    选好文件后，会自动触发改方法（设为自动上传  :auto-upload='true'）
      // handlePostFileBofore(uploadItem) {
      //   console.log(uploadItem)
      //   let formData = new FormData()
      //   formData.append('ico_upload', uploadItem.file)
      //   // formData.append('md5', md5(uploadItem.file))
      //   uploadItem.data = formData
      // },

      //     手动上传文件1
      handlePostFile(item) {
        console.log(item)
        let formData = item
        // reqFileUpload(formData).then(res => {
        //   item.iconUrl = res.message.url
        //   item.fileData = null
        //   console.log('success')
        // }).catch(err => {
        //   // this.$message.error('上传失败，请重新上传')
        // })
      },

      _handleEareCode() {
        this.test = !this.test
      },
      // 图片上传前验证
      // beforeAvatarUpload(file) {
      //   const isLt2M = file.size / 1024 / 1024 < 5
      //   if (!isLt2M) {
      //     console.log('上传头像图片大小不能超过 2MB!')
      //     // this.$message.error('上传头像图片大小不能超过 2MB!')
      //   }
      //   return isLt2M
      // },
      // 上传图片到OSS 同时派发一个事件给父组件监听
      async upload(item) {
        // console.log(item)
        // const params = {
        //   ico_upload: item.file,
        //   md5: md5(item.file)
        // }
        // const res = await api.fileUpload(params)
        // console.log(res)
        // if (res.status == 0) {
        //   console.log(res.data)
        // } else {
        //   Toast(res.info)
        // }
        // getAliOSSCreds().then(res => { // 向后台发请求 拉取OSS相关配置
        //   let creds = res.body.data
        //   let client = new OSS.Wrapper({
        //     region: 'oss-cn-beijing', // 服务器集群地区
        //     accessKeyId: creds.accessKeyId, // OSS帐号
        //     accessKeySecret: creds.accessKeySecret, // OSS 密码
        //     stsToken: creds.securityToken, // 签名token
        //     bucket: 'imgXXXX' // 阿里云上存储的 Bucket
        //   })
        //   let key = 'resource/' + localStorage.userId + '/images/' + createId() + '.jpg' // 存储路径，并且给图片改成唯一名字
        //   return client.put(key, item.file) // OSS上传
        // }).then(res => {
        //   console.log(res.url)
        //   this.$emit('on-success', res.url) // 返回图片的存储路径
        // }).catch(err => {
        //   console.log(err)
        // })
      }
    }
  }
</script>
<style scoped lang="scss">

</style>

